<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v3中最终的响应式(劫持)</title>
</head>

<body>
    <script>
        // 定义一个源对象 
        const user = {
            name: 'rose',
            age: 20
        }

        // 可以使用Proxy将这个源对象进行设置
        const u = new Proxy(user, {
            get(target, propName) {
                console.log('访问了属性值...', target, propName)
                // return 200
                // return target[propName] // 返回要访问的属性值
                return Reflect.get(target, propName)
            },
            // 不管是修改属性还是添加一个之前没有的属性都会执行set中的逻辑
            set(target, propName, value) {
                // obj 表示源对象
                // propName 表示要操作的属性名
                // value  要修改的值
                console.log('只要设置就会执行这个逻辑...', target, propName, value)
                Reflect.set(target, propName, value)
            },
            deleteProperty(target, propName) {
                // 只要删除 某个属性，就会走这个业务逻辑
                console.log('删除了某个属性', target, propName)
                // return delete target[propName]
                return Reflect.deleteProperty(target, propName)
            }
            // 相当于vue2中的Object.defineProperty('user', 'age', {
            //     get() {

            //     }, set() {

            //     }
            // })
        })
        delete u.age
        console.log(u.age = 123)

    </script>

</body>

</html>